<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- .header{头部区域}+p.title{标题区域}+(.content{内容区域}>.swiper{轮播图}+ul.ads{广告列表}>li.ad_item{第$@4个广告}*4^ul.goods{商品列表}>li.good${我是第$个商品}*8^ul.goods{商品列表}>li.good${我是第$个商品}*8^ul.goods{商品列表}>li.good${我是第$个商品}*8)^.footer -->

    <div class="header">头部</div>
    <p class="title">标题</p>
    <div class="content">
      内容
      <div class="swiper">轮播</div>
      <ul class="ads">
        广告
        <li class="ad_item">第4个</li>
        <li class="ad_item">第5个</li>
        <li class="ad_item">第6个</li>
        <li class="ad_item">第7个</li>
      </ul>
      <ul class="goods">
        商品
        <li class="good1">第1个</li>
        <li class="good2">第2个</li>
        <li class="good3">第3个</li>
        <li class="good4">第4个</li>
        <li class="good5">第5个</li>
        <li class="good6">第6个</li>
        <li class="good7">第7个</li>
        <li class="good8">第8个</li>
      </ul>
      <ul class="goods">
        商品
        <li class="good1">第1个</li>
        <li class="good2">第2个</li>
        <li class="good3">第3个</li>
        <li class="good4">第4个</li>
        <li class="good5">第5个</li>
        <li class="good6">第6个</li>
        <li class="good7">第7个</li>
        <li class="good8">第8个</li>
      </ul>
      <ul class="goods">
        商品
        <li class="good1">第1个</li>
        <li class="good2">第2个</li>
        <li class="good3">第3个</li>
        <li class="good4">第4个</li>
        <li class="good5">第5个</li>
        <li class="good6">第6个</li>
        <li class="good7">第7个</li>
        <li class="good8">第8个</li>
      </ul>
    </div>
    <div class="footer">底部区域</div>
  </body>
</html>
